<template>
    <div>
        <div class="top text_left">
            定位城市：
            <span>
<!--                href为空放上去不变手-->
                <a href="#" class="top_color">成都</a>
            </span>
        </div>
        <div class="mid_recent ">
            <h4 class="text_left">最近访问</h4>
            <div class="top " style="padding: 0!important;">
                <ul class="table" >
                    <li v-for="item in recentCity"><a class="public" href="/">{{item}}</a></li>
                </ul>
            </div>
        </div>
        <div class="mid_city_host ">
            <h4 class="text_left">热门城市</h4>
            <div class="top " style="padding: 0!important;">
                <ul class="table" >
                    <li v-for="item in hostCity"><a class="public" href="/">{{item}}</a></li>
                </ul>
            </div>
        </div>
        <div class="foot_spell">
            <div class="mid_recent ">
                <h4 class="text_left">全部城市</h4>
                <div class="top " style="padding: 0!important;">
                    <ul class="table table_spell" >
<!--                        :href="'#'+item"-->
                        <li v-for="item in spellCity"><a :href="'#'+item" class="public mid_recent_spell_color">{{item}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "CitTop",
        data(){
            return{
                recentCity:['成都','北京'],
                hostCity:['成都','江苏','浙江'],
                spellCity:['A','B','C','D','E','F']
            }
        },
        methods:{

        }
    }
</script>

<style scoped>

    .top{
        display: block;
        margin-top: .2rem;
        /*margin-bottom: .4rem;*/
        padding: .28rem .2rem;
        border: 1px solid #DDD8CE;
        border-radius: .06rem;
        overflow: hidden;
        background-color: #FDFDFC;
    }
    .top_color{
        color: #06c1ae;
    }
    .text_left{
        text-align: left;
    }
    .table{
        min-height: .8rem;
        position: relative;
        overflow: hidden;
        z-index: 0;
    }
.table:before {
    content: '';
    position: absolute;
    width: 25%;
    left: 25%;
    height: 100%;
    border-left: 1px solid #ddd8ce;
    border-right: 1px solid #ddd8ce;
}
.table_spell:before{
    border-left: none;
    border-right: none;
}
.table:after {
    content: '';
    position: absolute;
    width: 10%;
    left: 75%;
    height: 100%;
    border-left: 1px solid #ddd8ce;
    border-right: none;
}
.table_spell:after{
    border-left: none;

}
.table li{
    display: inline-block;
    width: 25%;
    height: .8rem;
    line-height: .8rem;
    font-size: .28rem;
    text-align: center;
    border-bottom: 1px solid #ddd8ce;
    margin-bottom: -1px;
    float: left;
    position: relative;
    z-index: 10;
}
    .public{
        display: block;
        color: inherit;
        height: 100%;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        outline: 0;
    }
    .mid_recent_spell_color{
        color: #06c1ae;
    }
</style>